<!--
* @author wn
* @date 2022/05/24 09:53:00
* @description: 商品详情组件
!-->
<template>
	<div class="goods-page" v-if="goods">
		<div class="container">
			<!-- 面包屑 -->
			<xtx-bread>
				<xtx-bread-item to="/">首页</xtx-bread-item>
				<xtx-bread-item :to="`/category/${goods.categories[1].id}`">
					{{ goods.categories[1].name }}
				</xtx-bread-item>
				<xtx-bread-item :to="`/category/sub/${goods.categories[0].id}`">
					{{ goods.categories[0].name }}
				</xtx-bread-item>
				<xtx-bread-item>{{ goods.name }}</xtx-bread-item>
			</xtx-bread>
			<!-- 商品信息 -->
			<div class="goods-info">
				<!-- 商品左边 -->
				<div class="goods-info-left">
					<goods-image :images="goods.mainPictures" />
					<goods-sales />
				</div>
				<!-- 商品右边 -->
				<div class="goods-info-right">
					<!-- 名字 -->
					<goods-name :goods="goods" />
					<!-- 规格 购物车真实传入 skuId 这里测试-->
					<good-sku :goods="goods" skuId="300208365" @change="changeSku" />
					<!-- 数量 -->
					<xtx-number-box v-model="count" :max="goods.inventory" label="数量" />
					<!-- 加购物车 -->
					<xtx-button type="primary" @click="insertCart">加入购物车</xtx-button>
				</div>
			</div>
			<!-- 商品推荐 或者猜你喜欢 -->
			<goods-relevant :goodId="goods.id"> 商品推荐 </goods-relevant>
			<!-- 商品详情 -->
			<div class="goods-footer">
				<div class="goods-article">
					<!-- 商品+评价 -->
					<goods-tabs></goods-tabs>
					<!-- 注意事项 -->
					<goods-warn />
				</div>
				<!-- 24热榜+专题推荐 -->
				<aside class="goods-aside">
					<goods-hot />
					<goods-hot :type="2" />
					<goods-hot :type="3" />
				</aside>
			</div>
			<!-- 加载组件 -->
		</div>
	</div>
</template>
<script>
import { findGoods } from '@/network/product'
import { nextTick, provide, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import GoodsImage from './components/GoodsImage'
import GoodsSales from './components/GoodsSales'
import GoodsName from './components/GoodsName'
import GoodSku from './components/GoodSku'
import GoodsRelevant from './components/GoodsRelevant'
import GoodsTabs from './components/GoodsTabs'
import GoodsHot from './components/GoodsHot'
import GoodsWarn from './components/GoodsWarn'
import Message from '@/components/library/message'
import { useStore } from 'vuex'

export default {
	name: 'GoodsPage',
	components: {
		GoodsImage,
		GoodsSales,
		GoodsName,
		GoodSku,
		GoodsRelevant,
		GoodsTabs,
		GoodsHot,
		GoodsWarn,
	},
	setup() {
		const goods = useGoods()
		const changeSku = ({ skuId, inventory, oldPrice, price, specsText }) => {
			// 根据 选中状态 修改 商品信息
			if (skuId) {
				goods.value.inventory = inventory
				goods.value.oldPrice = oldPrice
				goods.value.price = price
				// 存储当前 skuId，加入购物车的时候要用到  规格不完整 是 {}
				goods.value.currSkuId = skuId
				goods.value.attrsText = specsText
			} else {
				// 没有选择完整规格就重置为空
				goods.value.currSkuId = ''
			}
		}
		// 商品数量
		const count = ref(1)
		// 提供  good 给 后代组件 使用
		provide('good', goods)

		// 加入购物车
		// id skuId name picture price count attrsText selected
		// nowPrice stock isCollect discount isEffective
		const store = useStore()
		const insertCart = async () => {
			// 判断是否选择了完整规格
			if (!goods.value.currSkuId) {
				return Message({ type: 'warn', message: '请选择完整规格' })
			}
			if (count.value > goods.value.inventory) {
				return Message({ type: 'warn', message: '库存不足' })
			}
			// 约定本地存储的信息内容 - 字段名可参考购物车列表接口的字段名
			const cartItem = {
				skuId: goods.value.currSkuId,
				id: goods.value.id,
				name: goods.value.name,
				picture: goods.value.mainPictures[0],
				price: goods.value.price,
				count: count.value,
				attrsText: goods.value.attrsText,
				selected: true,
				nowPrice: goods.value.price,
				stock: goods.value.inventory || goods.value.stock, // 库存字段兼容性写法(库存在不同接口字段名有差别)
				isCollect: false,
				discount: 1,
				isEffective: true,
			}
			try {
				const result = await store.dispatch('cart/insertCart', cartItem)
				Message({ type: 'success', message: result })
			} catch (error) {
				Message({ type: 'error', message: error })
			}
		}
		return { goods, changeSku, count, insertCart }
	},
}
// 定义获取 goods 函数
const useGoods = () => {
	const goods = ref(null)
	const route = useRoute()
	// 获取数据 放在  路由的监听中  初始化就执行
	watch(
		() => route.params.id,
		async newId => {
			if (newId && `/product/${newId}` === route.path) {
				const { result } = await findGoods(newId)
				// 点击该页面其他商品 goods.value 变化  但是不会触发 v-if
				// 为了 使用到 v-if 生效 每次 清空在 赋值
				// 清空生效后  DOM 渲染  在 赋值
				goods.value = null
				nextTick(() => {
					goods.value = result
				})
			}
		},
		{ immediate: true }
	)
	return goods
}
</script>
<style scoped lang="less">
.goods-info {
	display: flex;
	min-height: 600px;
	background: #fff;
	.goods-info-left {
		width: 580px;
		height: 600px;
		padding: 30px 50px;
	}
	.goods-info-right {
		flex: 1;
		padding: 30px 30px 30px 0;
	}
}
.goods-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.goods-article {
		width: 940px;
	}
	.goods-aside {
		width: 280px;
		min-height: 1000px;
	}
}
// .xtx-button 距离上部 20px
.xtx-button {
	margin-top: 20px;
}
</style>
